<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item v-for="(item,index) in tabs" :to="item.link">
        <span>{{item.title}}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.image_selected : item.image">
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tabs: [],
      active: 0
    };
  },
  computed: {},
  methods: {
    initData() {
      axios.get("/json/tabs").then(res => {
        this.tabs = res.data.data.tabs;
        this.tabs.forEach(el => {
          if (el.link === this.$route.path) {
            this.active = el.group;
          }
        });
      });
    }
  },
  created() {
    console.log(this.$route.path);
    this.initData();
  }
};
</script>



<style lang="less">
.van-tabbar {
  .van-tabbar-item--active {
    color: #e02e24;
  }
}
</style>
